<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对齐属性【文本与图片】</title>
		<!-- 垂直方向对齐属性 vertical-align
		     使用方法：1.用于表格中单元格垂直居中
			          2.用于行内元素以及行内块元素
					  【文本和图片垂直居中（对齐）效果】
					  对齐分为四种：基线对齐、顶部对齐
					              居中对齐、底部对齐
					元素种类：块元素、行元素、行内块元素
					块元素特点：独占一行、设置宽高
					行元素特点：一行内显示、不能设置宽高
					网页：元素之间嵌套生成
					行元素与块元素可以任意嵌套
					前提：设置宽高---行套块
					            ---块套块 √
								---块套行 √
					前提：一行内显示---行套块 √
					              ---块套块 ×
								  ---块套行 √
								---行套行 √
					  
		 -->
		 <style>
			.w1 img{
				/* vertical-align:baseline 默认基线对齐 */
				vertical-align: top;
				width: 500px;
				height: 500px;
				background-color: red;
				
			}
			.w2 img{
				/* vertical-align:baseline 默认基线对齐 */
				vertical-align:baseline;
				width: 500px;
				height: 500px;
				background-color: red;
				
			}
			.w3 img{
				/* vertical-align:baseline 默认基线对齐 */
				vertical-align: middle;
				width: 500px;
				height: 500px;
				background-color: red;
				
			}
			.w4 img{
				/* vertical-align:baseline 默认基线对齐 */
				vertical-align: bottom;
				width: 500px;
				height: 500px;
				background-color: red;
				
			}
		 </style>
	</head>
	<body>
<!-- 需求结构：四个p，嵌套 图片叫什么名字 
                     文字后加img，设定宽高：25
					 基线对齐、顶部对齐
					 居中对齐、底部对齐
					 
-->	
	
<p class="w1">哪吒1.img <img src="img/哪吒_爱给网_aigei_com.png" width="200px" height="200px">基线对齐</p>
	<p class="w2">哪吒2.img <img src="img/哪吒1_爱给网_aigei_com.png" width="200px" height="200px">顶部对齐</p>
		<p class="w3">哪吒3.img <img src="img/哪吒3_爱给网_aigei_com.png" width="200px" height="200px">居中对齐</p>
			<p class="w4">哪吒4.img <img src="img/1灵珠版哪吒_爱给网_aigei_com.png" width="200px" height="200px">底部对齐</p>
		<!-- css选择器--抓第一张图片
		 派生选择器：找后代+伪类选择器：加效果
		 -->
	

	</body>
</html>